import React, { PureComponent} from 'react';
// import C from '../C'
import './index.css'
class Demo extends PureComponent {
    render() {
        return (
            <div className={'parent'}>
                <h3>我是父组件</h3>
                {/*插槽：第一种方式*/}
                {/*<A>*/}
                {/*    <B/>*/}
                {/*</A>*/}
                {/*插槽：第二种方式*/}
                {/*<A render={(name)=><B name={name}/>}/>*/}

                {/*预留插槽*/}
                <A render={(state,props)=><B {...state} {...props}/>}/>
                {/*<A render={(state,props)=><C {...state} {...props}/>}/>*/}
            </div>
        );
    }
}
class A extends PureComponent{
    state={
        name:'Tom'
    }
    render() {
        return <div className={'a'}>
            <h3>我是A组件</h3>
            {/*插槽：第一种方式*/}
            {/*{this.props.children}*/}
            {/*插槽：第二种方式*/}
            {/*{this.props.render(this.state.name)}*/}

            {/*预留插槽*/}
            {this.props.render(this.state,this.props)}
        </div>
    }
}
class B extends PureComponent{
    render() {
        return <div className={'b'}>
            <h3>我是B组件</h3>
            {/*插槽：第二种方式*/}
            {/*<h5>从A那里获取的name:{this.props.name}</h5>*/}

            {/*预留插槽*/}
            <h5>从A那里获取的name:{this.props.name}</h5>
        </div>
    }
}
export default Demo;